'use strict';
/**
 * Created by FreezeSoul on 2015/10/24.
 */
define([
    "app/core/base",
    "app/core/util",
    "../commonMeta",
    "jquery",
    "underscore",
    'JSONParse',
    'loglevel',
    'jqueryTmpl',
    'jQueryRotate',
    'jQueryFlip'
], function (Chart, Util, Meta, $, _, JSON, log) {

    var property = {
        config: "property",
        option: [
            {
                group: '基础',
                id: 'TuPianZiYuanLuJing',
                name: '图片资源路径',
                enable: true,
                type: 'resource',
                value: '',
                default: '',
                link: 'imageUrl',
                tooltip: '设置图片的资源路径'
            },
            {
                group: '基础',
                id: 'TuPianLaShen',
                name: '图片拉伸',
                enable: false,
                type: 'checked',
                value: false,
                default: false,
                link: 'stretch',
                tooltip: '设置图片是否拉伸'
            }, {
                group: '基础',
                id: 'TuPianXuanZhuan',
                name: '旋转角度',
                enable: false,
                type: 'number',
                value: 0,
                default: 0,
                link: 'rotate',
                tooltip: '图片旋转角度'
            }, {
                group: '基础',
                id: 'TuPianAlign',
                name: '对齐方式',
                enable: false,
                type: 'select',
                value: 'left',
                default: 'left',
                data: [{
                    value: 'left',
                    text: 'left'
                }, {
                    value: 'right',
                    text: 'right'
                }, {
                    value: 'center',
                    text: 'center'
                }],
                link: 'imageAlign',
                tooltip: '字体对齐方式'
            }, {
                group: '基础',
                id: 'TuPianCssFilter',
                name: '图片滤镜',
                enable: false,
                type: 'select',
                value: '',
                default: '',
                data: [{
                    value: '',
                    text: '无效果'
                }, {
                    value: '_1977',
                    text: '1977'
                }, {
                    value: 'aden',
                    text: 'Aden'
                }, {
                    value: 'amaro',
                    text: 'Amaro'
                }, {
                    value: 'brannan',
                    text: 'Brannan'
                }, {
                    value: 'brooklyn',
                    text: 'Brooklyn'
                }, {
                    value: 'clarendon',
                    text: 'Clarendon'
                }, {
                    value: 'gingham',
                    text: 'Gingham'
                }, {
                    value: 'hudson',
                    text: 'Hudson'
                }, {
                    value: 'inkwell',
                    text: 'Inkwell'
                }, {
                    value: 'kelvin',
                    text: 'Kelvin'
                }, {
                    value: 'lark',
                    text: 'Lark'
                }, {
                    value: 'lofi',
                    text: 'Lo-fi'
                }, {
                    value: 'mayfair',
                    text: 'Mayfair'
                }, {
                    value: 'moon',
                    text: 'Moon'
                }, {
                    value: 'nashville',
                    text: 'Nashville'
                }, {
                    value: 'perpetua',
                    text: 'Perpetua'
                }, {
                    value: 'reyes',
                    text: 'Reyes'
                }, {
                    value: 'rise',
                    text: 'Rise'
                }, {
                    value: 'slumber',
                    text: 'Slumber'
                }, {
                    value: 'stinson',
                    text: 'Stinson'
                }, {
                    value: 'toaster',
                    text: 'Toaster'
                }, {
                    value: 'valencia',
                    text: 'Valencia'
                }, {
                    value: 'walden',
                    text: 'Walden'
                }, {
                    value: 'willow',
                    text: 'Willow'
                }, {
                    value: 'xpro2',
                    text: 'X-Pro-2'
                }],
                link: 'cssFilter',
                tooltip: '图片滤镜'
            }, {
                group: '基础',
                id: 'TuPianHover',
                name: '鼠标响应',
                enable: false,
                type: 'checked',
                value: false,
                default: false,
                link: 'isHover',
                tooltip: '图片鼠标响应状态，Hover高亮'
            },
            {
                group: '基础',
                id: 'TuPianPadding',
                name: '内边距值',
                enable: false,
                type: 'padding',
                value: [5, 5, 5, 5],
                default: [5, 5, 5, 5],
                link: 'padding',
                tooltip: '图片内边距值'
            },
            {
                group: '基础',
                id: 'TuPianHoverAnimationList',
                name: '高级响应',
                enable: false,
                type: 'select',
                value: '',
                default: '',
                data: [{
                    value: '',
                    text: '无效果'
                }, {value: 'bounce', text: 'bounce'},
                    {value: 'flash', text: 'flash'},
                    {value: 'pulse', text: 'pulse'},
                    {value: 'rubberBand', text: 'rubberBand'},
                    {value: 'shake', text: 'shake'},
                    {value: 'headShake', text: 'headShake'},
                    {value: 'swing', text: 'swing'},
                    {value: 'tada', text: 'tada'},
                    {value: 'wobble', text: 'wobble'},
                    {value: 'jello', text: 'jello'},
                    {value: 'bounceIn', text: 'bounceIn'},
                    {value: 'bounceInDown', text: 'bounceInDown'},
                    {value: 'bounceInLeft', text: 'bounceInLeft'},
                    {value: 'bounceInRight', text: 'bounceInRight'},
                    {value: 'bounceInUp', text: 'bounceInUp'},
                    {value: 'bounceOut', text: 'bounceOut'},
                    {value: 'bounceOutDown', text: 'bounceOutDown'},
                    {value: 'bounceOutLeft', text: 'bounceOutLeft'},
                    {value: 'bounceOutRight', text: 'bounceOutRight'},
                    {value: 'bounceOutUp', text: 'bounceOutUp'},
                    {value: 'fadeIn', text: 'fadeIn'},
                    {value: 'fadeInDown', text: 'fadeInDown'},
                    {value: 'fadeInDownBig', text: 'fadeInDownBig'},
                    {value: 'fadeInLeft', text: 'fadeInLeft'},
                    {value: 'fadeInLeftBig', text: 'fadeInLeftBig'},
                    {value: 'fadeInRight', text: 'fadeInRight'},
                    {value: 'fadeInRightBig', text: 'fadeInRightBig'},
                    {value: 'fadeInUp', text: 'fadeInUp'},
                    {value: 'fadeInUpBig', text: 'fadeInUpBig'},
                    {value: 'fadeOut', text: 'fadeOut'},
                    {value: 'fadeOutDown', text: 'fadeOutDown'},
                    {value: 'fadeOutDownBig', text: 'fadeOutDownBig'},
                    {value: 'fadeOutLeft', text: 'fadeOutLeft'},
                    {value: 'fadeOutLeftBig', text: 'fadeOutLeftBig'},
                    {value: 'fadeOutRight', text: 'fadeOutRight'},
                    {value: 'fadeOutRightBig', text: 'fadeOutRightBig'},
                    {value: 'fadeOutUp', text: 'fadeOutUp'},
                    {value: 'fadeOutUpBig', text: 'fadeOutUpBig'},
                    {value: 'flipInX', text: 'flipInX'},
                    {value: 'flipInY', text: 'flipInY'},
                    {value: 'flipOutX', text: 'flipOutX'},
                    {value: 'flipOutY', text: 'flipOutY'},
                    {value: 'lightSpeedIn', text: 'lightSpeedIn'},
                    {value: 'lightSpeedOut', text: 'lightSpeedOut'},
                    {value: 'rotateIn', text: 'rotateIn'},
                    {value: 'rotateInDownLeft', text: 'rotateInDownLeft'},
                    {value: 'rotateInDownRight', text: 'rotateInDownRight'},
                    {value: 'rotateInUpLeft', text: 'rotateInUpLeft'},
                    {value: 'rotateInUpRight', text: 'rotateInUpRight'},
                    {value: 'rotateOut', text: 'rotateOut'},
                    {value: 'rotateOutDownLeft', text: 'rotateOutDownLeft'},
                    {value: 'rotateOutDownRight', text: 'rotateOutDownRight'},
                    {value: 'rotateOutUpLeft', text: 'rotateOutUpLeft'},
                    {value: 'rotateOutUpRight', text: 'rotateOutUpRight'},
                    {value: 'hinge', text: 'hinge'},
                    {value: 'jackInTheBox', text: 'jackInTheBox'},
                    {value: 'rollIn', text: 'rollIn'},
                    {value: 'rollOut', text: 'rollOut'},
                    {value: 'zoomIn', text: 'zoomIn'},
                    {value: 'zoomInDown', text: 'zoomInDown'},
                    {value: 'zoomInLeft', text: 'zoomInLeft'},
                    {value: 'zoomInRight', text: 'zoomInRight'},
                    {value: 'zoomInUp', text: 'zoomInUp'},
                    {value: 'zoomOut', text: 'zoomOut'},
                    {value: 'zoomOutDown', text: 'zoomOutDown'},
                    {value: 'zoomOutLeft', text: 'zoomOutLeft'},
                    {value: 'zoomOutRight', text: 'zoomOutRight'},
                    {value: 'zoomOutUp', text: 'zoomOutUp'},
                    {value: 'slideInDown', text: 'slideInDown'},
                    {value: 'slideInLeft', text: 'slideInLeft'},
                    {value: 'slideInRight', text: 'slideInRight'},
                    {value: 'slideInUp', text: 'slideInUp'},
                    {value: 'slideOutDown', text: 'slideOutDown'},
                    {value: 'slideOutLeft', text: 'slideOutLeft'},
                    {value: 'slideOutRight', text: 'slideOutRight'},
                    {value: 'slideOutUp', text: 'slideOutUp'}],
                link: 'hoverAnimation',
                tooltip: '鼠标响应动画'
            }, {
                group: '事件',
                id: 'ImageClick',
                name: '点击跳转事件',
                enable: true,
                type: 'pivotEvent',
                value: {
                    Event: "ImageClick",
                    Params: []
                },
                tooltip: '点击跳转事件，钻取设置'
            },
            {
                group: '事件',
                id: 'ImageClickJsEval',
                name: '点击执行脚本',
                enable: false,
                type: 'script',
                value: '',
                default: '',
                link: 'clickScript',
                tooltip: '点击执行脚本，可定制复杂的JS操作'
            }
        ].concat($.extend(true, [], Meta.commonProperties)),
        MapOption: function (option) {
            Util.linkOption(this.option, option);
        }
    };

    var image = Chart.extend({
        constructor: function (layout) {
            this._layout = layout;
            this._element = null;
            this._container = null;
            this._template = '<img style="border: 0;" src="${imageUrl}"/>';

            this._option = {
                Series: [],
                Events: [],
                Extend: $.extend(true, {}, property),
                Option: {
                    uuid: '',
                    class: '',
                    display: true,
                    imageUrl: '',
                    stretch: false,
                    rotate: 0,
                    imageAlign: "",
                    isHover: false,
                    cssFilter: "",
                    clickScript: '',
                    hoverAnimation: "",
                    initScript: '',
                    disposeScript: ''
                }
            };
        },
        init: function (element) {
            try {
                this._container = element;
            } catch (e) {
                log.error(e);
            }
        },
        _readProperty: function () {
            try {
                if (!this._option.Extend) return;
                Util.deepMapOption(property, this._option.Extend, this._option.Option);
            } catch (e) {
                log.error(e);
            }
        },
        _render: function (option) {
            var rootPath = "static/resource/";
            var imageUrl = adConfig.baseServiceUrl + rootPath + option.imageUrl;
            var $element = $.tmpl(this._template, {
                imageUrl: imageUrl
            });
            if (option.stretch) {
                $element.css({"width": "100%", "height": "100%"});
            }
            if (option.rotate && option.rotate !== 0) {
                $element.css({
                    "transform": "rotate(" + option.rotate + "deg)",
                    "-ms-transform": "rotate(" + option.rotate + "deg)",
                    "-moz-transform": "rotate(" + option.rotate + "deg)",
                    "-o-transform": "rotate(" + option.rotate + "deg)"
                });
            }

            if (option.cssFilter) {
                $element.attr('class', '');
                $element.addClass(option.cssFilter);
            }

            $(this._container).empty();
            $element.appendTo(this._container);
            if ($.isArray(option.padding) && option.padding.length === 4) {
                if (option.padding[0] && option.padding[0] > 0)
                    $element.parent().css("padding-top", option.padding[0]);
                if (option.padding[1] && option.padding[1] > 0)
                    $element.parent().css("padding-right", option.padding[1]);
                if (option.padding[2] && option.padding[2] > 0)
                    $element.parent().css("padding-bottom", option.padding[2]);
                if (option.padding[3] && option.padding[3] > 0)
                    $element.parent().css("padding-left", option.padding[3]);
            }
            if (option.imageAlign) {
                $element.parent().css("text-align", option.imageAlign);
            }
            if (this._option.Option.hoverAnimation) {
                var _this = this;
                $element.hover(
                    function () {
                        if ($element.hasClass("animated")) return;
                        $element.addClass("animated " + _this._option.Option.hoverAnimation)
                            .one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
                                $element.removeClass("animated " + _this._option.Option.hoverAnimation)
                            });
                    }, function () {
                    }
                );
            }

            //Util.setCommonMeta(this, this._container, option);
            //Util.initChartLifeTime(this, this._container, this._option.Option);

            this._bindEvent($element);
            return $element;
        },
        _bindEvent: function (element) {
            var _this = this;
            $(element).on("click", function (e) {
                if (_this._layout
                    && _this._layout.navigate
                    && _this._option.Events
                    && _this._option.Events.length > 0) {

                    var registerEvent = _.findWhere(_this._option.Events, {Event: "ImageClick"});
                    if (registerEvent) {
                        var pageId = registerEvent.PageId;
                        _this._layout.navigate(pageId, []);
                    }
                    e.preventDefault();
                }

                if (_this._option.Option
                    && _this._option.Option.clickScript) {
                    Util.evalJavaScript(_this, _this._option.Option.clickScript);
                }
            });
            if (this._option.Option
                && this._option.Option.isHover) {
                element.hover(function () {
                    element.css({opacity: 0.7});
                }, function () {
                    element.css({opacity: 1});
                });
            }
        },
        example: function () {
            try {
                this._element = this._render(this._option.Option);
            } catch (e) {
                log.error(e);
            }
        },
        _bindData: function (data) {
        },
        setData: function (data) {
            try {
                this._readProperty();

                if (data
                    && this._option.Binding
                    && this._option.Binding.length > 0
                    && this._option.Extend
                ) {
                    this._bindData(data);
                }
                this._element = this._render(this._option.Option);
            } catch (e) {
                log.error(e);
            }
        },
        setOption: function (option) {
            try {
                return this._option = $.extend(true, {}, option);
            } catch (e) {
                log.error(e);
            }
        },
        getOption: function () {
            try {
                this._readProperty();
            } catch (e) {
                log.error(e);
            }
            return this._option;
        },
        setTheme: function (theme) {
            try {
            } catch (e) {
                log.error(e);
            }
        },
        resize: function () {
            try {
            } catch (e) {
                log.error(e);
            }
        },
        showLoading: function () {
            try {
                if (this._layout && this._layout.showLoading) {
                    this._layout.showLoading(this);
                }
            } catch (e) {
                log.error(e);
            }
        },
        hideLoading: function () {
            try {
                if (this._layout && this._layout.hideLoading) {
                    this._layout.hideLoading(this);
                }
            } catch (e) {
                log.error(e);
            }
        },
        dispose: function () {
            try {
                $(this._element).off().remove();
                //Util.disposeChartLifeTime(this, this._container, this._option.Option);
            } catch (e) {
                log.error(e);
            }
        },
        getElement: function () {
            return this._element;
        },
        getChart: function () {
            return this._element;
        }
    });

    return {
        Chart: image,
        Property: property
    };
});